<template>
	<view style="padding-bottom: 120rpx;">
		<u-navbar
			v-if="!$isWeixin()"
			:customBack="backToList"
			:title="title"
			:titleWidth="450"
			:titleBold="true"
			:background="{ backgroundColor: '#ffffff' }"
			:is-fixed="true"
		></u-navbar>
		<u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

		<view class="" v-show="tabIndex == 0">
			<u-cell-item title="验收照片" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
			<u-cell-item :arrow="false" style="padding: 10rpx;"><image-upload :multiple="true" v-model="applyPhoto" :maxCount="5"></image-upload></u-cell-item>

			<u-cell-item title="验收备注" :arrow="false"><u-input inputAlign="right" type="textarea" placeholder="验收备注" v-model="form.Remake"></u-input></u-cell-item>
			
			<block v-if="showReview">
				<u-gap height="40" bg-color="#f5f5f5"></u-gap>
				<review-form ref="reviewForm"></review-form>
			</block>
	
		</view>

		<view class="" v-if="tabIndex == 1"><relations :list="state.Dealer_RelationList"></relations></view>

		<view class="" v-if="tabIndex == 2">
			<basic-information
				v-if="state.ShowLevel == 1"
				:metadata="state.DataBaseInfo"
				:showOtherInfo="false"
				:showReview="false"
				:showGrade="false"
				:showParent="false"
				:loadCity="loadCity"
				:data="{
					Dealer_BaseInfo: state.First_Dealer_BaseInfo
				}"
			></basic-information>

			<block v-if="state.ShowLevel == 2">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<basic-information
					:level="2"
					:metadata="state.DataBaseInfo"
					:showOtherInfo="false"
					:showReview="false"
					:showGrade="false"
					:showParent="false"
					:loadCity="loadCity"
					:data="{
						Dealer_BaseInfo: state.Double_Dealer_BaseInfo
					}"
				></basic-information>
			</block>

			<block v-if="state.ShowLevel == 3">
				<u-cell-item title="一级经销商名称" :arrow="false" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
				<u-cell-item title="二级经销商名称" :arrow="false" :value="state.Double_Dealer_BaseInfo.Name" :border-bottom="false"></u-cell-item>
				<store-information :loadCity="loadCity" :data="state.Door_Dealer_BaseInfo"></store-information>
			</block>
		</view>

		<view style="" v-if="tabIndex == 3">
			<medals-apply @edit="() => onEdit(item)" :applyType="3" v-for="(item, index) in state.ModultMedalsDetail" :key="index" :value="item" :index="index"></medals-apply>
		</view>

		<view class="btn-group-fixed"><u-button v-if="showReview" type="warning" @tap="submit">提交验收审核</u-button></view>
		<u-toast ref="uToast" />

		<u-popup mode="bottom" height="80%" :border-radius="24" v-model="showApplyModal" :mask-close-able="true" :showLoading="false" :async-close="true">
			<view class="" style="padding-bottom: 120rpx; position: relative;">
				<view class="u-font-28 u-text-center" style="margin: 20rpx 0;font-weight: bold;">奖牌验收</view>
				<medals-apply-form ref="applyForm" :applyType="2" :loadForm="loadForm"></medals-apply-form>
				<view class="btn-group-absolute u-flex">
					<u-button size="medium" @tap="showApplyModal = false">取消</u-button>
					<u-button type="warning" @tap="moduleAcceptance" size="medium">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '奖牌验收审核',

			tabList: [{ name: '审核信息' }, { name: '销售业务关系' }, { name: '基本信息' }, { name: '奖牌验收' }],
			tabIndex: 0,

			selectType: 5,

			showReview: false,

			moduleList: [],
			shellPrototypeList: [],
			entityPrototypeList: [],

			showApplyModal: false,
			loadForm: false,
			loadCity: false,

			areaCode: [],

			state: {
				ApplicationDate: null,
				ApplicationRemake: '',
				ApplyForPhoto: [],
				CompletionPhoto: [],
				DataBaseInfo: {},
				Dealer_RelationList: [],
				DoorHandleInfo: {},
				DoorPhotoList: [],
				Door_Dealer_BaseInfo: {},
				Double_Dealer_BaseInfo: {},
				EntityPrototypeDetail: [],
				FinalAuditNote: '',
				FirstAuditNote: '',
				First_Dealer_BaseInfo: {},
				LogisticsList: [],
				ModuleDetail: [],
				ModultMedalsDetail: [],
				OutdoorSuitsDetail: [],
				ReviewAuditNote: '',
				ShellPrototypeDetail: [],
				ShowLevel: null,
				StateName: '',
				State: null
			},

			applyPhoto: [],

			prototypeList: [{ label: '空壳样机', name: 1 }, { label: '实体样机', name: 2 }],

			form: {
				DealerId: null,
				AcceptanceAuditId: '',
				CheckPhoto: '',
				Remake: '',

				DoorHandleInfo: {
					Grade: null,
					Module: null,
					IsDoor: null,
					IsPrototype: -1,
					IsGoodDoor: -1
				},

				ModuleList: [],
				ShellPrototypeList: [],
				EntityPrototypeList: [],
				OutdoorSuitsList: [],
				MedalsList: [],

				AuditRemark: '',
				State: ''
			}
		};
	},

	onLoad(options) {
		if (options.DealerId) {
			this.form.DealerId = options.DealerId;
		}
		if (options.Id) {
			this.form.AcceptanceAuditId = options.Id;
		}
		this.init();

		this.$setTitle(this.title);
	},

	methods: {
		backToList() {
			uni.navigateBack();
		},

		onPrototypeChange(e) {
			console.log(e);
			if (e.length == 2) {
				this.form.DoorHandleInfo.IsPrototype = 3;
			} else {
				this.form.DoorHandleInfo.IsPrototype = e[0];
			}
		},

		onCityChange(e) {
			if (e.province) {
				this.form.Delivery_ProvinceId = e.province.value;
			}
			if (e.city) {
				this.form.Delivery_CityId = e.city.value;
			}
			if (e.area) {
				this.form.Delivery_DistrictId = e.area.value;
			}
		},

		submit() {
			this.form.CheckPhoto = this.applyPhoto.map(item => item.Value).join(',');

			this.form.State = this.$refs.reviewForm.form.State;
			this.form.AuditRemark = this.$refs.reviewForm.form.AuditRemark;

			if (!this.form.State) {
				this.$u.toast('请选择审核状态');
				return false;
			}

			console.log(this.form);

			this.$u.api.approvalMedalsCheck(this.form).then(res => {
				const { ResultCode, ResultMessage } = res;
				if (ResultCode === 1) {
					this.$refs.uToast.show({
						title: ResultMessage,
						back: true
					});
				}
			});
		},

		onEdit(item) {
			this.loadForm = true;
			this.showApplyModal = true;

			this.$nextTick(() => {
				this.$refs.applyForm.initForm(Object.assign({}, item));
			});
		},

		moduleAcceptance() {
			const applyForm = this.$refs.applyForm.form;

			const currentGroupId = this.$refs.applyForm.GroupId;

			let current = this.state.ModultMedalsDetail.find(item => item.GroupId == currentGroupId);

			current &&
				current.ApplyList.forEach(apply => {
					this.$set(apply, 'CheckTime', applyForm.ApplyTime);
					this.$set(apply, 'CheckRemark', applyForm.Remark);
					applyForm.ProductList.forEach(item => {
						item.DifferencesNum = parseInt(item.Number) - parseInt(item.CheckNumber);
					});

					apply.ProductList = Object.assign(apply.ProductList, this.$u.deepClone(applyForm.ProductList));
				});

			this.showApplyModal = false;
		},

		init() {
			this.$u.api
				.getModuleAcceptanceReviewDetail({
					DealerId: this.form.DealerId,
					SelectType: this.selectType,
					AcceptanceAuditId: this.form.AcceptanceAuditId
				})
				.then(res => {
					console.log(res);
					const { ResultCode, ResultData } = res;
					if (ResultCode === 1) {
						
						if (this.vuex_user.ManagerId == res.NextManagerId) {
							this.showReview = true;
						}

						this.state = ResultData;

						const { ModultMedalsDetail, ApplyForPhoto, CompletionPhoto, DoorHandleInfo } = ResultData;

						if (ModultMedalsDetail) {
							ModultMedalsDetail.forEach(item => (item.editable = true));
							this.form.MedalsList = ModultMedalsDetail;
						}

						if (ApplyForPhoto) {
							this.applyPhoto = ApplyForPhoto.split(',').map(item => {
								return {
									Value: item
								};
							});
						}

						if (CompletionPhoto) {
							this.CompletionPhoto = CompletionPhoto.split(',').map(item => {
								return {
									Value: item
								};
							});
						}

						this.loadCity = true;
					}
				});
		}
	}
};
</script>

<style>
/* 	page {
		background-color: #eaecef;
	} */
</style>
<style lang="scss"></style>
